React useFormStatus: Hướng Dẫn Toàn Diện về Quản Lý Trạng Thái Form

Hook useFormStatus, được giới thiệu trong React 18, cung cấp một cách mạnh mẽ và hiệu quả để quản lý trạng thái gửi của các form trong React Server Components. Hook này được thiết kế đặc biệt để hoạt động với các server action, mang lại sự tích hợp liền mạch để xử lý việc gửi form trực tiếp trên server. Nó đơn giản hóa quá trình theo dõi trạng thái gửi form, cung cấp thông tin giá trị như liệu form có đang chờ xử lý, đã thành công hay đã gặp lỗi. Hướng dẫn này khám phá các khả năng của useFormStatus, lợi ích của nó, và các ví dụ thực tế minh họa cách sử dụng trong nhiều kịch bản khác nhau.

Tìm hiểu về Server Actions và useFormStatus

Trước khi đi sâu vào useFormStatus, điều quan trọng là phải hiểu về React Server Components và Server Actions. Server Actions cho phép bạn định nghĩa các hàm chạy trên server, có thể truy cập trực tiếp từ các component React của bạn. Điều này cho phép xử lý việc gửi form, tìm nạp dữ liệu và các hoạt động phía server khác mà không cần một API endpoint riêng biệt.

Sau đó, hook useFormStatus cung cấp thông tin chi tiết về quá trình thực thi của các Server Actions này được kích hoạt bởi việc gửi form.

useFormStatus là gì?

useFormStatus là một hook của React trả về một đối tượng chứa thông tin về trạng thái của lần gửi form gần nhất. Thông tin này bao gồm:

• pending: Một giá trị boolean cho biết liệu form có đang được gửi đi hay không.
• data: Đối tượng FormData được liên kết với lần gửi.
• method: Phương thức HTTP được sử dụng để gửi (thường là 'POST').
• action: Hàm Server Action đã được kích hoạt.

Lợi ích của việc sử dụng useFormStatus

Việc tận dụng useFormStatus mang lại một số lợi thế chính:

• Quản lý Trạng thái Đơn giản hóa: Loại bỏ sự cần thiết của việc quản lý trạng thái thủ công để theo dõi trạng thái gửi form. Hook sẽ tự động cập nhật khi quá trình gửi diễn ra.
• Cải thiện Trải nghiệm Người dùng: Cung cấp phản hồi thời gian thực cho người dùng, chẳng hạn như hiển thị chỉ báo tải trong khi form đang được xử lý hoặc hiển thị thông báo lỗi khi thất bại.
• Code Sạch sẽ: Thúc đẩy một codebase có tính khai báo và dễ bảo trì hơn bằng cách tách biệt logic gửi form khỏi logic render của component.
• Tích hợp Liền mạch với Server Actions: Được thiết kế để hoạt động hoàn hảo với Server Actions, giúp dễ dàng xử lý việc gửi form trực tiếp trên server.

Ví dụ thực tế về useFormStatus

Hãy cùng khám phá một vài ví dụ thực tế để minh họa cách sử dụng useFormStatus trong các tình huống khác nhau.

Gửi Form Cơ bản với Chỉ báo Tải

Ví dụ này minh họa một form đơn giản với một chỉ báo tải hiển thị trong khi form đang được gửi đi.

Server Action (actions.js):

'use server'

export async function submitForm(formData) {
  // Mô phỏng độ trễ để minh họa trạng thái tải
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  console.log('Form submitted with name:', name);
  return { message: `Form submitted successfully with name: ${name}` };
}

React Component (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'

function FormComponent() {
  const { pending } = useFormStatus()

  return (
    

      Name:
      
      
        {pending ? 'Submitting...' : 'Submit'}
      
    
  )
}

export default FormComponent

Trong ví dụ này, thuộc tính pending từ useFormStatus được sử dụng để vô hiệu hóa trường nhập liệu và nút trong khi form đang được gửi, và để hiển thị thông báo "Submitting...".

Xử lý Trạng thái Thành công và Lỗi

Ví dụ này minh họa cách xử lý trạng thái thành công và lỗi sau khi gửi form.

Server Action (actions.js):

'use server'

export async function submitForm(formData) {
  // Mô phỏng độ trễ
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');

  if (!name) {
    throw new Error('Name is required');
  }

  console.log('Form submitted with name:', name);
  return { message: `Form submitted successfully with name: ${name}` };
}

React Component (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'
import { useState } from 'react'

function FormComponent() {
  const { pending } = useFormStatus()
  const [message, setMessage] = useState(null);
  const [error, setError] = useState(null);

  async function handleSubmit(formData) {
    try {
      const result = await submitForm(formData);
      setMessage(result.message);
      setError(null);
    } catch (e) {
      setError(e.message);
      setMessage(null);
    }
  }

  return (
    

      Name:
      
      
        {pending ? 'Submitting...' : 'Submit'}
      
      {pending && 
Submitting...
}
      {message && 
{message}
}
      {error && 
Error: {error}
}
    
  )
}

export default FormComponent

Trong ví dụ này, một khối try/catch được sử dụng trong hàm handleSubmit. Nếu Server Action ném ra lỗi, nó sẽ được bắt và hiển thị cho người dùng. Một thông báo thành công sẽ được hiển thị khi gửi thành công.

Sử dụng FormData cho Dữ liệu Phức tạp

useFormStatus hoạt động liền mạch với FormData, cho phép bạn xử lý các cấu trúc dữ liệu phức tạp một cách dễ dàng. Dưới đây là một ví dụ minh họa cách tải lên tệp.

Server Action (actions.js):

'use server'

export async function uploadFile(formData) {
  // Mô phỏng quá trình xử lý tệp
  await new Promise(resolve => setTimeout(resolve, 2000));

  const file = formData.get('file');

  if (!file) {
    throw new Error('No file uploaded');
  }

  console.log('File uploaded:', file.name);
  return { message: `File uploaded successfully: ${file.name}` };
}

React Component (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { uploadFile } from './actions'
import { useState } from 'react'

function FormComponent() {
  const { pending } = useFormStatus()
  const [message, setMessage] = useState(null);
  const [error, setError] = useState(null);

  async function handleSubmit(formData) {
    try {
      const result = await uploadFile(formData);
      setMessage(result.message);
      setError(null);
    } catch (e) {
      setError(e.message);
      setMessage(null);
    }
  }

  return (
    

      Upload File:
      
      
        {pending ? 'Uploading...' : 'Upload'}
      
      {pending && 
Uploading...
}
      {message && 
{message}
}
      {error && 
Error: {error}
}
    
  )
}

export default FormComponent

Ví dụ này minh họa cách xử lý việc tải lên tệp bằng FormData. Server action lấy tệp từ đối tượng FormData và xử lý nó. Hook useFormStatus quản lý trạng thái tải trong khi tệp đang được tải lên.

Các Phương pháp Tốt nhất khi sử dụng useFormStatus

Để tối đa hóa lợi ích của useFormStatus, hãy xem xét các phương pháp tốt nhất sau:

• Cung cấp Phản hồi Rõ ràng cho Người dùng: Sử dụng trạng thái pending để hiển thị các chỉ báo tải thông tin và vô hiệu hóa các phần tử của form để ngăn chặn việc gửi nhiều lần.
• Xử lý Lỗi một cách Mềm mỏng: Triển khai xử lý lỗi để bắt các ngoại lệ trong Server Actions của bạn và hiển thị các thông báo lỗi thân thiện với người dùng.
• Xác thực Dữ liệu trên Server: Thực hiện xác thực phía server để đảm bảo tính toàn vẹn và bảo mật dữ liệu.
• Giữ cho Server Actions Ngắn gọn: Tập trung Server Actions vào các tác vụ cụ thể để cải thiện hiệu suất và khả năng bảo trì.
• Cân nhắc đến Khả năng tiếp cận: Đảm bảo các form của bạn có thể truy cập được bằng cách cung cấp các nhãn, thuộc tính ARIA và hỗ trợ điều hướng bằng bàn phím phù hợp.

Các Trường hợp Sử dụng Nâng cao

Ngoài các ví dụ cơ bản, useFormStatus có thể được sử dụng trong các kịch bản phức tạp hơn:

• Cải tiến Tăng dần (Progressive Enhancement): Sử dụng Server Actions và useFormStatus để cải tiến dần các form của bạn, cung cấp trải nghiệm cơ bản cho người dùng đã tắt JavaScript và trải nghiệm phong phú hơn cho những người đã bật JavaScript.
• Cập nhật Lạc quan (Optimistic Updates): Triển khai các cập nhật lạc quan bằng cách cập nhật giao diện người dùng ngay sau khi form được gửi, giả định rằng việc gửi sẽ thành công. Hoàn tác cập nhật nếu việc gửi thất bại.
• Tích hợp với Thư viện Form: Tích hợp useFormStatus với các thư viện form phổ biến như Formik hoặc React Hook Form để quản lý trạng thái và xác thực form. Mặc dù các thư viện này thường có cơ chế quản lý trạng thái riêng, useFormStatus có thể hữu ích cho giai đoạn gửi cuối cùng đến một server action.

Những Lưu ý về Quốc tế hóa (i18n)

Khi xây dựng các form cho khán giả toàn cầu, quốc tế hóa (i18n) là rất quan trọng. Dưới đây là cách xem xét i18n khi sử dụng useFormStatus:

• Thông báo Lỗi được Bản địa hóa: Đảm bảo rằng các thông báo lỗi hiển thị cho người dùng được bản địa hóa theo ngôn ngữ ưa thích của họ. Điều này có thể đạt được bằng cách lưu trữ các thông báo lỗi trong các tệp dịch và sử dụng một thư viện như react-intl hoặc i18next để lấy bản dịch phù hợp.
• Định dạng Ngày và Số: Xử lý định dạng ngày và số theo ngôn ngữ của người dùng. Sử dụng các thư viện như Intl.DateTimeFormat và Intl.NumberFormat để định dạng các giá trị này một cách chính xác.
• Hỗ trợ Từ Phải sang Trái (RTL): Nếu ứng dụng của bạn hỗ trợ các ngôn ngữ được viết từ phải sang trái (ví dụ: tiếng Ả Rập, tiếng Do Thái), hãy đảm bảo rằng các form của bạn được tạo kiểu đúng cách để phù hợp với bố cục RTL.
• Xác thực Form: Điều chỉnh các quy tắc xác thực form cho các ngôn ngữ khác nhau. Ví dụ, việc xác thực số điện thoại có thể khác nhau đáng kể giữa các quốc gia.

Ví dụ về Thông báo Lỗi được Bản địa hóa:

// translations/en.json
{
  "form.error.nameRequired": "Please enter your name.",
  "form.success.submission": "Thank you for your submission!"
}

// translations/fr.json
{
  "form.error.nameRequired": "Veuillez entrer votre nom.",
  "form.success.submission": "Merci pour votre soumission !"
}

// Component sử dụng react-intl
import { useIntl } from 'react-intl';

function FormComponent() {
  const intl = useIntl();
  const [error, setError] = useState(null);

  // ...

  catch (e) {
    setError(intl.formatMessage({ id: 'form.error.nameRequired' }));
  }
}

Những Lưu ý về Khả năng Tiếp cận

Khả năng tiếp cận là một khía cạnh quan trọng của việc xây dựng các ứng dụng web toàn diện. Dưới đây là một số lưu ý về khả năng tiếp cận cần ghi nhớ khi sử dụng useFormStatus:

• Thuộc tính ARIA: Sử dụng các thuộc tính ARIA để cung cấp cho các công nghệ hỗ trợ thông tin về trạng thái của form. Ví dụ, sử dụng aria-busy="true" trên nút gửi trong khi form đang chờ xử lý.
• Nhãn (Labels): Đảm bảo tất cả các trường trong form đều có nhãn rõ ràng và mô tả được liên kết với các phần tử nhập liệu bằng cách sử dụng phần tử <label>.
• Thông báo Lỗi: Hiển thị thông báo lỗi theo cách dễ nhận biết và dễ hiểu đối với người dùng khuyết tật. Sử dụng các thuộc tính ARIA như aria-live="assertive" để thông báo lỗi cho trình đọc màn hình.
• Điều hướng bằng Bàn phím: Đảm bảo rằng người dùng có thể điều hướng form chỉ bằng bàn phím. Sử dụng thuộc tính tabindex để kiểm soát thứ tự các phần tử nhận tiêu điểm.
• Độ tương phản Màu sắc: Đảm bảo rằng màu văn bản và màu nền được sử dụng trong form có độ tương phản đủ để người dùng khiếm thị có thể dễ dàng đọc được.

useFormStatus so với Quản lý Trạng thái Truyền thống

Theo truyền thống, các nhà phát triển React đã quản lý trạng thái gửi form bằng cách sử dụng trạng thái của component (useState) hoặc các thư viện quản lý trạng thái phức tạp hơn (ví dụ: Redux, Zustand). Dưới đây là so sánh các phương pháp này với useFormStatus:

Tính năng	useFormStatus	useState	Quản lý Trạng thái Bên ngoài
Độ phức tạp	Thấp	Trung bình	Cao
Tích hợp với Server Actions	Liền mạch	Yêu cầu tích hợp thủ công	Yêu cầu tích hợp thủ công
Code soạn sẵn (Boilerplate)	Tối thiểu	Vừa phải	Đáng kể
Trường hợp sử dụng phù hợp	Các form gửi trực tiếp đến Server Actions	Các form đơn giản với trạng thái hạn chế	Các form phức tạp với trạng thái được chia sẻ giữa các component

useFormStatus tỏa sáng khi các form của bạn tương tác trực tiếp với React Server Actions. Nó giảm bớt code soạn sẵn và đơn giản hóa quy trình. Tuy nhiên, đối với các form rất phức tạp với trạng thái được chia sẻ giữa nhiều component, một thư viện quản lý trạng thái đầy đủ vẫn có thể là cần thiết.

Xử lý các Vấn đề Thường gặp

Dưới đây là một số vấn đề phổ biến bạn có thể gặp phải khi sử dụng useFormStatus và cách khắc phục chúng:

• useFormStatus không cập nhật:
  • Đảm bảo rằng bạn đang sử dụng useFormStatus bên trong một phần tử <form> có prop action được đặt thành một Server Action.
  • Xác minh rằng Server Action được định nghĩa và xuất (export) chính xác.
  • Kiểm tra xem có lỗi nào trong Server Action có thể ngăn cản nó hoàn thành thành công hay không.
• Thông báo lỗi không hiển thị:
  • Hãy chắc chắn rằng bạn đang bắt lỗi chính xác trong Server Action của mình và trả về một thông báo lỗi.
  • Xác minh rằng bạn đang hiển thị thông báo lỗi trong component của mình bằng cách sử dụng trạng thái error.
• Chỉ báo tải không xuất hiện:
  • Đảm bảo rằng bạn đang sử dụng trạng thái pending từ useFormStatus để hiển thị có điều kiện chỉ báo tải.
  • Kiểm tra xem Server Action có thực sự mất một khoảng thời gian để hoàn thành hay không (ví dụ: bằng cách mô phỏng độ trễ).

Kết luận

useFormStatus cung cấp một cách sạch sẽ và hiệu quả để quản lý trạng thái gửi form trong các ứng dụng React sử dụng Server Components. Bằng cách tận dụng hook này, bạn có thể đơn giản hóa code của mình, cải thiện trải nghiệm người dùng và tích hợp liền mạch với Server Actions. Hướng dẫn này đã đề cập đến các nguyên tắc cơ bản của useFormStatus, cung cấp các ví dụ thực tế và thảo luận về các phương pháp tốt nhất để sử dụng nó một cách hiệu quả. Bằng cách kết hợp useFormStatus vào các dự án React của mình, bạn có thể hợp lý hóa việc xử lý form và xây dựng các ứng dụng mạnh mẽ và thân thiện với người dùng hơn cho khán giả toàn cầu.